import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon, Row, Col, DatePicker, Select, Message  } from 'antd';
import '../../../../assets/css/landlord/table.css'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const MonthPicker = DatePicker.MonthPicker;

let Demo = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },
  getInitialState() {
    return {
      costList:[], // 收费项列表
      rentContractId:'',//合约id
      normalFeekeys: [], // 正常收费项列表key
      costNameContent:'', // 收费项内容
      keys:[], //存储添加项的key和type（模板渲染类型）

      typeIdArry:[],   // 收费项类型id数组
      typeNameArry:[], // 收费项类型名称关联数组
      costIdArry:[], // 收费项名称id数组
      costNameArry:[], //收费项名称关联数组
      curType:'1',  // 当前选中的类型为1
      periodCollectAmount:'0.00', // 当期应收金额
      periodReceivedAmount:'0.00', // 当期实收金额
      receivedAmountArry: [], // 实收金额输入框id,金额关联数组
      idArry:[] // 实收金额输入框id数组
    }
  },

  componentDidMount() {
    this.fetchCostList();


  },


  // 获取收费项列表
  fetchCostList(){
    let _me = this;
    let id = this.props.location.state.roomId;
    let params = {roomId: id};
    Utils.sendAjax({
      url: '/rent/cost/list',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          let collectAmount = _me.calculateCollectAmount(result.data);
          let data = _me.getReceivedAmountArry(result.data);
          let receivedAmountArry = data.receivedAmountArry;
          let idArry = data.idArry;

          _me.getNormalFee(result.data);
          _me.setState({
            costList: result.data,
            periodCollectAmount: collectAmount,
            periodReceivedAmount: collectAmount,
            receivedAmountArry: receivedAmountArry,
            idArry: idArry
          })
        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },
  // 获取其他收费项  收费项类别列表
  fetchCostTypeList(){
    let _me = this;
    Utils.sendAjax({
      url: '/rent/costType/list',
      callback: function(result) {
        if (result.code == '200') {

          _me.getTypeList(result.data);
          _me.getCostList(result.data);
        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },

  // 获取 costIdArry、costNameArry
  getCostList(data){
    let costIdArry = [];
    let costNameArry = [];
    data.forEach((item) => {
      let idArry = [];
      item.feeList.forEach((item1) => {
        idArry.push(item1.feeId);
        costNameArry[item1.feeId] = item1.feeName;
      });
      costIdArry[item.typeId] = idArry;

    });
    this.setState({
      costIdArry: costIdArry,
      costNameArry: costNameArry
    });
  },



  // 获取typeIdArry、typeNameArry
  getTypeList(data){
    let typeIdArry = [];
    let typeNameArry = [];
    data.forEach((item) => {
      typeIdArry.push(item.typeId);
      typeNameArry[item.typeId] = item.typeName;
    });

    this.setState({
      typeIdArry: typeIdArry,
      typeNameArry: typeNameArry
    });
  },


// 获取正常收费项的key
  getNormalFee(data){
    let normalFeekeys = this.state.normalFeekeys;
    data.forEach((item) =>{
      normalFeekeys.push(item.id)
    });
    this.setState({
      normalFeekeys:normalFeekeys
    })
  },

  getContractExpenseList(data){
    let formData = [];
    data.keys.forEach(item => {
      let obj = {};
      obj.chargeName = data[item.key + "chargeName"];
      obj.chargeType = data[item.key + "chargeType"];
      obj.expenseAmount = data[item.key + "expenseAmount"]
      obj.otherItem = data[item.key + "otherItem"]
      formData.push(obj)
    });
    return formData;
  },
  getRentCostList(data){
    let formData = [];
    data.normalFeekeys.forEach(item => {
      let obj = {};
      obj.collectAmount = data[item + "collectAmount"];
      obj.contractFeeItemId = data[item + "contractFeeItemId"];
      obj.costName = data[item + "costName"];
      obj.costType = data[item + "costType"];
      obj.currScale = data[item + "currScale"];
      obj.depositBalance = data[item + "depositBalance"];
      obj.lastScale = data[item + "lastScale"];
      obj.receivedAmount = data[item + "receivedAmount"];
      obj.status = data[item + "status"];
      formData.push(obj)
    });
    return formData;
  },




  render() {
    console.log('keys',this.state.keys);
    const { getFieldProps,getFieldValue } = this.props.form;


    /* 仪表类列表 ***************start*/
    let arry = [];

    this.state.costList.forEach((item) => {

      let content = (
        <tr key={item.id}>
          <td>


          </td>

          <td  style={{width:100}}>{item.costName}</td>
          <td>

          </td>
          <td>
            {item.lastScale}
          </td>
          <td>
            {item.currScale}
          </td>
          <td>{item.price}</td>
          <td>{item.collectAmount}</td>
          <td>

          </td>
          <td>
            {item.depositBalance}
          </td>
        </tr>
      );
      arry.push(content);
    });
    /* 仪表类列表 ***************end*/

    /* 其他费用列表 ***************start*/


    //getFieldProps('keys', {
    //  initialValue: [],
    //});
    //
    //let typeIdArry = this.state.typeIdArry;
    //
    //let typeNameArry = this.state.typeNameArry;
    //let costIdArry = this.state.costIdArry;
    //let costNameArry = this.state.costNameArry;
    //let keys = this.state.keys;
    //
    //let costNameOptionsArry = {};
    //const otherFeeItem = keys.map((item)=> {
    //  const costTypeOptions = typeIdArry.map((typeItem)=> {
    //    if(costIdArry[typeItem]){
    //      const costNameOptions = costIdArry[typeItem].map((item1) => {
    //        return (
    //          <Option key={`costName${item1}`} value={item1}>{costNameArry[item1]}</Option>
    //        );
    //      });
    //      costNameOptionsArry[typeItem] = costNameOptions;
    //
    //    }
    //    return (
    //      <Option key={`costType${typeItem}`} value={typeItem}>{typeNameArry[typeItem]}</Option>
    //    );
    //  });
    //
    //  console.log('costNameOptionsArry',costNameOptionsArry);
    //
    //
    //  const chargeType = getFieldProps(`${item.key}chargeType`, {
    //    //rules:[
    //    //  {
    //    //    required: true ,
    //    //    message: '请选择收费项类型'
    //    //  },
    //    //],
    //    onChange:this.handleCostTypeChange.bind(this,item.key)
    //  });
    //
    //  const chargeName = getFieldProps(`${item.key}chargeName`, {
    //    //rules:[
    //    //  {
    //    //    required: true ,
    //    //    message: '请选择收费项名称'
    //    //  },
    //    //],
    //    onChange:this.handleCostNameChange.bind(this,item.key)
    //  });
    //  const expenseAmount = getFieldProps(`${item.key}expenseAmount`, {
    //    //rules:[
    //    //  {
    //    //    required: true ,
    //    //    message: '请选择收费项名称'
    //    //  },
    //    //],
    //    onChange:this.handleGetValue.bind(this,item.key)
    //  });
    //
    //  return (
    //    <Row key={item.key} gutter={24}>
    //      <Col sm={5}>
    //        <FormItem label="收费项类别" >
    //          <Select {...chargeType} placeholder="请选择" style={{width:100}}>
    //            {costTypeOptions}
    //          </Select>
    //        </FormItem>
    //      </Col>
    //
    //      <Col sm={5}>
    //        {
    //          item.type == 4 ?
    //            <FormItem label="其他收费项" >
    //              <Input {...getFieldProps(`${item.key}otherItem`, { })}  style={{width:100}}/>
    //            </FormItem>
    //            :
    //            <FormItem label="收费项名称" >
    //              <Select {...chargeName} placeholder="请选择" style={{width:100}}>
    //                {costNameOptionsArry[item.type]}
    //              </Select>
    //            </FormItem>
    //        }
    //
    //      </Col>
    //      <Col sm={7}>
    //        <FormItem label="金额" >
    //          <Input type="text" {...expenseAmount}  style={{width:100}}/>元
    //        </FormItem>
    //      </Col>
    //      <Col sm={2}>
    //        <FormItem >
    //          <span className="addfree-btn" onClick={() =>this.handleRemoveOtherFee(item.key)}>
    //            <Icon title="删除" type="cross" />
    //          </span>
    //        </FormItem>
    //      </Col>
    //    </Row>
    //  );
    //});


    /* 其他费用列表 ***************end*/

    return (
      <Form inline className="form-group inner-content">
        <Row gutter={24}>
          <Col sm={5}>
            <FormItem label="房间名称" >
              <p className="ant-form-text"></p>
            </FormItem>
          </Col>
          <Col sm={5}>
            <FormItem label="租客姓名" >
            </FormItem>
          </Col>
          <Col sm={16}></Col>
        </Row>
        <Row gutter={24}>
          <Col sm={5}>
            <FormItem label="收租月份" >
            </FormItem>
          </Col>
          <Col sm={5}>
            <FormItem label="退租日期" >
            </FormItem>
          </Col>
          <Col sm={5}>
            <FormItem label="缴费日期" >
            </FormItem>
          </Col>

          <Col sm={14}></Col>
        </Row>

        <table className="normal-table">
          <thead className="ant-table-thead">
          <tr>
            <th>操作</th>

            <th style={{width:100}}>收费项名称</th>

            <th>计费方式</th>

            <th>上次刻度</th>

            <th>本次刻度</th>

            <th>单价 / 元</th>

            <th>应收金额 / 元</th>

            <th>实收金额 / 元</th>

            <th>押金余额 / 元</th>
          </tr>
          </thead>
          <tbody className="ant-table-tbody">

          {arry}

          </tbody>
        </table>
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem style={{ marginTop: 24 }}>
              <Button type="primary" onClick={this.handleAddOtherFee}>追加其他费用</Button>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem label="应收金额" >
              <p className="ant-form-text">{this.state.periodCollectAmount}</p>元
            </FormItem>
          </Col>

          <Col sm={8}>
            <FormItem label="实际收款" >
              <p className="ant-form-text">{this.state.periodReceivedAmount}</p>元
            </FormItem>
          </Col>
          <Col sm={16}></Col>
        </Row>

      </Form>
    );
  },
});

Demo = Form.create()(Demo);
export default Demo